<template>
  <div style="width: 100%">
    <ElementDialog
      ref="dialog"
      :visible="visible"
      embed
      height="500px"
      width="80%"
      :body-padding="false"
      show-full-screen
      title="资产信息"
      @open="onOpen"
      @close="onClose"
      @opened="onOpened">
      <SkeletonPanel flex-column>
        <template #left>
          <ElTabs v-model="activeName" @tab-click="handleClick">
            <ElTabPane v-if="inType === 'ALL' || inType === 'DEVICE'" label="资产分类" name="DEVICE">
              <ElTree
                default-expand-all
                :data="treeData1"
                :props="default_tree_props"
                :expand-on-click-node="false"
                @node-click="handleNodeClick" />
            </ElTabPane>
            <ElTabPane v-if="inType === 'ALL' || inType === 'CONSUMABLES'" label="耗材分类" name="CONSUMABLES">
              <ElTree
                default-expand-all
                :data="treeData2"
                :props="default_tree_props"
                :expand-on-click-node="false"
                @node-click="handleNodeClick" />
            </ElTabPane>
          </ElTabs>
        </template>
        <div style="padding: 6px 10px; text-align: right">
          <ElInput v-model="searchObj.name" style="width: 200px; margin-right: 10px" placeholder="请输入资产名称" />
          <ElButton type="primary" @click="searchChange">搜索</ElButton>
        </div>
        <div style="padding: 4px 10px; color: #2d8cf0; text-align: right; background-color: #ebeef5">
          <span style="cursor: pointer" @click="showDrawer = true">高级搜索</span>
        </div>
        <PageableTable
          ref="PageableTable"
          v-loading="tableLoading"
          :table-attrs="{ descs: ['create_time'], dicOptions: [{ prop: 'status', dicType: 'asset_status' }] }"
          :api="getList"
          :multiple="multiple"
          :data="tableData"
          @selection-change="change">
          <TableColumn prop="photo" label="照 片">
            <template #default="scope">
              <img
                v-if="scope.row.photo"
                :src="scope.row.photo"
                class="avatar"
                alt=""
                style="width: 120px; height: 80px" />
            </template>
          </TableColumn>
          <TableColumn prop="status" label="状态" width="60">
            <template #default="scope">
              <ElTag>{{ renderStatus(scope.row.status) }}</ElTag>
            </template>
          </TableColumn>
          <TableColumn prop="ctiName" label="资产分类" />
          <TableColumn prop="barcode" label="条型码" />
          <TableColumn prop="name" label="资产名称" />
          <TableColumn prop="number" label="资产编码" />
          <TableColumn prop="model" label="规格型号" width="70" />
          <TableColumn prop="unit" label="计量单位" width="70" />
          <TableColumn prop="sn" label="SN" />
          <TableColumn prop="price" label="金额" width="80" />
        </PageableTable>
      </SkeletonPanel>
      <template #footer>
        <ElButton type="primary" @click="confirm">确定</ElButton>
      </template>
    </ElementDialog>

    <ElDrawer :visible.sync="showDrawer" title="高级搜索" append-to-body>
      <ElForm ref="form" :model="searchObj" label-width="80px" label-position="right">
        <ElRow class="form-row">
          <ElCol :span="12">
            <ElFormItem prop="ctiName" label="资产分类">
              <ElInput v-model="searchObj.ctiName" placeholder="请输入资产分类" />
            </ElFormItem>
          </ElCol>
          <ElCol :span="12">
            <ElFormItem prop="barcode" label="条型码">
              <ElInput v-model="searchObj.barcode" placeholder="请输入条型码" />
            </ElFormItem>
          </ElCol>
          <ElCol :span="12">
            <ElFormItem prop="name" label="资产名称">
              <ElInput v-model="searchObj.name" placeholder="请输入资产名称" />
            </ElFormItem>
          </ElCol>
          <ElCol :span="12">
            <ElFormItem prop="model" label="规格型号">
              <ElInput v-model="searchObj.model" placeholder="请输入规格型号" />
            </ElFormItem>
          </ElCol>
          <ElCol :span="12">
            <ElFormItem prop="amount" label="金额">
              <ElInput v-model="searchObj.amount" placeholder="请输入金额" />
            </ElFormItem>
          </ElCol>
          <ElCol :span="12">
            <ElFormItem label="计量单位">
              <ElInput v-model="searchObj.unit" />
            </ElFormItem>
          </ElCol>
          <ElCol :span="24" style="text-align: center">
            <ElButton type="primary" @click="higtSearchChange">搜索</ElButton>
            <ElButton @click="clear">清空</ElButton>
          </ElCol>
        </ElRow>
      </ElForm>
    </ElDrawer>
  </div>
</template>

<script>
  import { fetchCtiTree } from '@/api/asset/fyassetcti'
  import { fetchAssetCardList } from '@/api/asset/fyassetassetcard'
  import { getDictData } from '@/util/dictionary'

  export default {
    name: 'AssetCardTable',
    props: {
      visible: Boolean,
      sauId: {
        type: String
      },
      // 单据类型 ALL
      inType: {
        type: String
      },
      inStatus: {
        type: Number,
        default: 0
      },
      multiple: Boolean
    },
    data() {
      return {
        showDrawer: false,
        treeData1: [],
        treeData2: [],
        default_tree_props: { label: 'name', value: 'id' },
        type: '',
        activeName: 'DEVICE',
        tableData: [],
        rows: [],
        searchObj: {
          ctiId: '',
          ctiName: '',
          name: '',
          model: '',
          unit: '',
          amount: '',
          barcode: '',
          citType: '',
          inStatus: 0,
          current: 1,
          size: 25
        },
        tableLoading: false,
        assetStatus: []
      }
    },
    created() {
      this.type = 'DEVICE'
      this.init()
    },
    methods: {
      async init() {
        this.assetStatus = await getDictData('asset_status')

        fetchCtiTree({ assetType: 'DEVICE' }).then(response => {
          this.treeData1 = response.data.data
        })
        fetchCtiTree({ assetType: 'CONSUMABLES' }).then(response => {
          this.treeData2 = response.data.data
        })
        this.getList({ current: 1, size: 25, ctiType: this.activeName, status: this.inStatus })
      },
      getPage(page) {
        return fetchAssetCardList({ current: page.page, size: page.limit })
      },
      getList(params) {
        fetchAssetCardList(params)
          .then(response => {
            this.tableData = response.data.data.records
            this.$refs.PageableTable.page.total = response.data.data.total
          })
          .catch(() => {
            this.tableLoading = false
          })
      },
      change(rows) {
        this.rows = rows
      },
      rowClick(row, column, event) {
        console.log(row)
      },
      confirm() {
        if (this.$isBlank(this.rows)) {
          this.$message.warning('请选择资产物品信息')
          return
        }
        this.$emit('confirm', this.rows)
        this.$refs.dialog.hide()
      },
      handleNodeClick(data) {
        this.getList({ current: 1, size: 25, ctiId: data.id, status: this.inStatus })
      },
      handleClick(tab, event) {
        this.getList({ current: 1, size: 25, ctiType: tab.name, status: this.inStatus })
      },
      onOpen() {
        if (this.sauId === '') {
          this.rows = []
        }
        if (this.inType === 'ALL' || this.inType === 'DEVICE') {
          this.activeName = 'DEVICE'
        } else {
          this.activeName = this.inType
        }
      },
      onOpened() {
        this.getList({ current: 1, size: 25, ctiType: this.inType, status: this.inStatus })
      },
      onClose() {},
      clear() {
        this.searchObj.ctiType = this.activeName
        this.searchObj.ctiName = ''
        this.searchObj.name = ''
        this.searchObj.model = ''
        this.searchObj.unit = ''
        this.searchObj.barcode = ''
        this.searchObj.amount = ''
        this.$refs.form.resetFields()
      },
      searchChange(value) {
        this.getList({ current: 1, size: 25, ctiType: this.inType, status: this.inStatus, name: this.searchObj.name })
      },
      higtSearchChange() {
        this.searchObj.ctiType = this.activeName
        this.searchObj.status = this.inStatus
        this.getList(this.searchObj)
      },
      renderStatus(status) {
        return this.assetStatus
          .filter(item => item.value === status)
          .map(item => item.label)
          .join('')
      }
    }
  }
</script>
